/* 
1 实现 标题的点击 切换选中

2 标题点击切换的同时   
  1 筛选组件的 也要改变 

  2 会把 所有的筛选的数据 重新 存入到一个数组中 

  3 picker-view组件没有发生改变
    改变的只是 picker-view的数据源而已 

  4 假设 所有的数据源 都存放在一个大数组中  filterList
    1 filterList[0]  =  第一个筛选组件的 数据源
    2 filterList[1]  =  第二个筛选组件的 数据源
    3 filterList[2]  =  第三个筛选组件的 数据源
  
  5 总结: 要构造 filterList 现在 重点知识

3 第四个筛选组件的显示
  1 因为第四个组件的 结构和前三个完全不一样的
    单独编写

4 picker内容的 文本 对齐方式 
  1 picker-view 组件的 cols 属性 即可 (自动的对齐) 

5  点击取消 和 点击遮罩层 功能都是一样  currentIndex

6 获取筛选组件的值的前提
  1 分析一下 房源列表接口 需要什么的样的参数 /houses

  2 获取 筛选组件的值 
    1 前三个组件picker-view 通过 onChange 事件来获取选中的值 - 数据格式 数组  value属性!! 实现双向绑定-受控表单

    2 最好 是通过 一个大 数组来管理 各个筛选组件的值 

7 获取第四个筛选组件的选中的值
  1 给第四个筛选组件的 筛选项绑定点击事件
    1 点击的时候判断一下 当前的值 是否存在 大数组中
      1 如果已经存在的话 就移除
      2 如果不存在 就添加 

8 当用户点击了确定之后 需要发送选中的值 给 父组件 
  1 绑定点击事件

  2 将他们 组装成一个对象  

 */




import React, { Component } from 'react';
import Css from "./index.module.scss";
import { PickerView } from "antd-mobile";
import { request } from "../../../utils/request";
import { connect } from "react-redux";

class index extends Component {
  state = {
    // 标题数组
    titles: [
      { id: 0, text: "区域", cols: 3 },
      { id: 1, text: "方式", cols: 1 },
      { id: 2, text: "租金", cols: 1 },
      { id: 3, text: "筛选", cols: -1 }
    ],
    // 标题选中的索引  -1 表示 不要显示筛选组件 
    currentIndex: -1,
    // 复合页面需求的筛选数据 大数组
    filterList: [[], [], [], []],
    // 四个筛选组件选中的值
    // 可以不写这么恶心的声明 但是现在 它的作用  帮主我们 反复理解和记忆 大数组的结构 
    selectValueList: [[], [], [], []]

  }
  async componentDidMount() {
    let filterList = [];
    // request
    const cityName = this.props.cityName;
    const id = (await request.get("/area/info?name=" + cityName)).data.body.value;
    // 房源条件 对象
    const res = (await request.get("/houses/condition?id=" + id)).data.body;
    // console.log(list);

    // 第一个筛选组件的数据源 
    filterList[0] = ([
      res.area,
      res.subway
    ])
    // 第二个筛选组件的数据源 
    filterList[1] = (res.rentType)
    // 第三个筛选组件的数据源 
    filterList[2] = (res.price);
    // 第四个筛选组件的数据源
    filterList[3] = ([
      { label: "户型", children: res.roomType },
      { label: "朝向", children: res.oriented },
      { label: "楼层", children: res.floor },
      { label: "房屋亮点", children: res.characteristic }
    ])
    this.setState({ filterList });

  }

  // 标题的点击事件
  handleTitleClick = (currentIndex) => {
    this.setState({ currentIndex });
  }

  // picker-view标签的 onchange事件
  handlePickerChange = (vals) => {
    // 选中后的值的数据格式 数组 vals
    // console.log(vals);
    // 获取 原来的选中的值数组 和 激活的索引
    let { selectValueList, currentIndex } = this.state;
    //  selectValueList[currentIndex]  获取到了用户要操作的 第几个筛选组件的 选中的值
    selectValueList[currentIndex] = vals;

    // 观察一下现在的筛选组件的现象
    // 先换其他方式 来实现 功能行不行
    this.setState({ selectValueList });

    // console.log(selectValueList);

  }


  // 第四个筛选组件的点击事件 
  handleMoreItemClick = (value) => {
    let { selectValueList, currentIndex } = this.state;
    // 判断值是否存在
    const index = selectValueList[currentIndex].findIndex(v => v === value);
    if (index === -1) {
      selectValueList[currentIndex].push(value);
    } else {
      selectValueList[currentIndex].splice(index, 1);
    }
    this.setState({ selectValueList });
  }

  // 用户点击了确定按钮
  handleSubmit = () => {
    // 将 数组 组装成一个的对象的格式 
    // 对象的组装 既要考虑 属性名 也要考虑到 属性值 

    // 获取 筛选组件的值 数组
    const { selectValueList } = this.state;
    // console.log(selectValueList);
    // 1 获取 第一个筛选组件的 属性名
    // 1.1 获取属性名
    const area_subway_name = selectValueList[0][0];
    // 1.2 获取属性值
    // 对数组的第三个元素判断 如果 合法(不能是 "null",不能是 undefined  ) 就拿第三个 不合法就拿第二个
    let area_subway_value = selectValueList[0][2];

    area_subway_value = ["null", undefined].includes(area_subway_value) ? selectValueList[0][1] : area_subway_value;

    // 2 获取租房方式的值
    const rentType = selectValueList[1][0];

    // 3 获取租金
    const price = selectValueList[2][0]

    // 4 第四个筛选组件 more
    const more = selectValueList[3].join(',');

    // 构造 参数对象
    // 一会 对对 obj对象的属性名和 属性值 做一个判断 只要 不合法 就删除该属性即可 
    let obj = {
      [area_subway_name]: area_subway_value,
      rentType,
      price,
      more
    }
    // 对对象进行过滤  不合法("","null" , undefined) 
    for (const key in obj) {
      if (['', 'null', undefined].includes(obj[key])) {
        // 删除该属性
        delete obj[key];
      }
    }

    // 子向父传递数据 通过事件的方式来传递的 
    // console.log(obj);
    this.props.onHandleSubmit(obj);

    this.setState({ currentIndex:-1  });
  }


  // 点击清除按钮
  handleClearMore=()=>{
    let {selectValueList,currentIndex}=this.state;
    selectValueList[currentIndex]=[];
    // 实现了清除 第四个筛选组件选中的值 
    this.setState({ selectValueList  });

  }

  // 根据索引 渲染不同的筛选组件
  renderFilterContent = () => {
    const { currentIndex, filterList, titles, selectValueList } = this.state;
    // 0-2 
    if (currentIndex >= 0 && currentIndex <= 2) {
      return <div className={Css.filter_picker}>
        <PickerView
          data={filterList[currentIndex]}
          cols={titles[currentIndex].cols}
          onChange={this.handlePickerChange}
          value={selectValueList[currentIndex]}
        />
        {/* 两个按钮 */}
        <div className={Css.picker_tools}>
          <span onClick={this.handleCancel.bind(this)} >取消</span>
          <span onClick={this.handleSubmit} >确定</span>
        </div>
      </div>
    } else if (currentIndex === 3) {
      return <div className={Css.filter_more}>
        <div className={Css.filter_more_content}>
          {
            filterList[currentIndex].map(v => <div
              className={Css.more_group}
              key={v.label}
            >
              <div className={Css.more_group_title}>{v.label}</div>
              <div className={Css.more_group_list}>
                {v.children.map(vv => <div onClick={() => this.handleMoreItemClick(vv.value)}
                  className={
                    [
                      Css.more_item,
                      selectValueList[currentIndex].includes(vv.value) ? Css.active : ''
                    ].join(' ')
                  } key={vv.value} >{vv.label}</div>)}
              </div>
            </div>)
          }
        </div>
        <div className={Css.filter_more_tools}>
          <span onClick={this.handleClearMore} >清除</span>
          <span onClick={this.handleSubmit}>确定</span>
        </div>
      </div>
    } else {
      // -1 显示空白了 
      return <></>
    }
  }

  // 取消筛选
  handleCancel = () => {
    this.setState({ currentIndex: -1 });
  }

  render() {
    const { titles, currentIndex, filterList } = this.state;
    return (
      <div className={Css.filter}>
        <div className={Css.filter_view}>
          {/* 1.0 标题 开始 */}
          <div className={
            [
              Css.filter_title,
              currentIndex === 3 ? Css.z100 : ''
            ].join(" ")
          }>
            {titles.map((v, i) => <div key={v.id}
              onClick={() => this.handleTitleClick(i)}
              className={
                [
                  Css.title_item,
                  i === currentIndex ? Css.active : ''
                ].join(" ")
              }
            >{v.text}</div>)}
          </div>
          {/* 1.0 标题 结束 */}
          {/* 2.0 内容 开始 */}
          <div className={Css.picker_content}>
            {this.renderFilterContent()}
          </div>
          {/* 2.0 内容 结束 */}

          {/* 遮罩层  */}
          <div onClick={this.handleCancel.bind(this)} className={Css.mask} hidden={currentIndex === -1} ></div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  cityName: state.mapReducer.city.name
})


export default connect(mapStateToProps)(index);